<script setup>
import { ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app';
import * as Api from '/api/questions'
let show = ref(false)
function onClose() {
  show.value = false
}
const goHearingDetail = (title,id) => {
  uni.navigateTo({
    url: `/pages/index/questions?type=1&title=${title}&id=${id}`
  })
}
let hearingList = ref([])
onLoad(async ()=>{
  let res = await Api.getQuestionsList(1)
  hearingList.value = res.data
})
</script>
<template>
  <scroll-view scroll-x="true" style="height: 50rpx;padding: 20rpx 0;white-space: nowrap;background-color: #f6f8fc">
    <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
      全部
    </view>
    <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
      2024
    </view>
    <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
      2023
    </view>
    <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
      2022
    </view>
    <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
      2021
    </view>
    <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
      2020
    </view>
    <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
      2019
    </view>
    <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
      2018
    </view>
    <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
      2017
    </view>
    <view style="margin: 0 10rpx;display: inline-block;background-color: white;border-radius: 10rpx;width: 100rpx;text-align: center;font-size: 26rpx;padding: 8rpx;line-height: 30rpx">
      2016
    </view>
  </scroll-view>
  <scroll-view scroll-y="true" style="padding: 0 20rpx;width: 710rpx;height: calc(100vh - 90rpx);background-color: #f6f8fc">
  <view v-for="item in hearingList" @click="goHearingDetail(item.title,item.id)" style="height:80rpx;border-radius: 20rpx;display: flex;align-items: center;justify-content: space-between;background-color: white;padding: 20rpx;">
    <view style="width: 600rpx">{{item.title}}</view>
    <van-icon name="arrow" />
  </view>

  </scroll-view>
  <van-popup
      :show="show"
      position="bottom"
      custom-style="height: 20%;"
      @close="onClose"
  />
</template>




<style scoped lang="scss">

</style>
